<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<title>有家花店 | 个人中心</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/base.css"></link>
<style>
.photo img {
	width: 200px;
	height: 200px;
	border: transparent;
	border-radius: 50%;
	text-align: center;
}

.clearfix .li1 {
	padding-top: 66px;
}

/*#content2 ul li {
	list-style: none;
	border-top: 1px solid gray;
	width: 80%;
	padding: 10px;
}

#content2 ul li:first-child {
	border: none;
}*/
</style>
<script>
	function Tab(num) {
		var i;
		for (i = 1; i < 3; i++) {
			if (i == num) {
				document.getElementById("content" + i).style.display = "block";
			} else {
				document.getElementById("content" + i).style.display = "none";
			}
		}
		if (num=2){
			$.get("");
		}
	}
</script>
</head>

<body>
	<div class="container-fluid">
		<!-- 引入header.jsp -->
		<jsp:include page="/header.jsp" />

		<div class="wrap">
			<div class="tab">
				<div id="tab1" class="tab1" onclick="Tab(1)" style="margin-right: 0px">个人信息</div>
				<%--<div id="tab2" class="tab2" onclick="Tab(2)">我的订单</div>--%>
			</div>
			<!-- 个人信息 -->
			<div id="content1" class="content1">
				<div id="info" class="info">
					<%--<form action="#" ENCTYPE="multipart/form-data">
						<input type="file" value="file">
						<input type="submit" value="提交">
					</form>--%>
					<form action="/upload" enctype="multipart/form-data" method="post">
					<table style="width: 850px" class="table">
						<tr>
							<td rowspan="3">
								<div id="photo" class="photo"><img src="${USER.img}" style="width: 200px;height: 200px;border: transparent;border-radius: 50%;text-align: center;"/></div>
								<%--<button id="btn1">
								<label for="files">更改头像</label>
								</button>--%>
								<input type="file" id="file" name="file" value="更改头像" <%--onchange="inputImg();" --%><%--style="display: none;"--%>>

							</td>
							<td style="vertical-align: middle;">
								<button id="btn2" disabled>用户名:</button>
								<input type="text" value="${USER.username}" READONLY name="username">
							</td>
							<td style="vertical-align: middle;margin-left: 300px">
								<button id="btn6" disabled>密码:</button>
								<input type=text value="${USER.password}" name="password" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">
							</td>
						</tr>
							<td style="vertical-align: middle;">
								<button id="btn7" disabled>邮箱:</button>
								<input type=email value="${USER.email}" name="email">
							</td>
							<td style="vertical-align: middle;">
								<button id="btn5" disabled>手机号:</button>
								<input type="text" value="${USER.telephone}" name="telephone" id="telephone">
								<span id="sp"></span>
							</td>
						</tr>
						<tr>
							<td style="vertical-align: middle;">
								<button id="btn3" disabled>地址:</button>
								<input type=text value="${USER.address}" name="address">
							</td>
							<td style="vertical-align: middle;">
								<button id="btn4" disabled>账户余额￥:</button>
								<input type="text" value="${USER.count}" READONLY name="count">
							</td>
						</tr>
					</table>
						<input type="submit" id="btn8" value="确认修改"  disabled>
					</form>
				</div>

			</div>
			<script>
				$("#telephone").blur(function () {
					var phone = $("#telephone").val();
					var regExp = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
					$.get("/yzphone.do",{"phone":phone},function (data) {
						if (data==0){
							if (phone != "" && phone != null) {
								if (regExp.test(phone)) {
									$("#sp").css("color","green").html("");
									$("#sp").css("color","green").html("手机号码可用");
									$("#btn8").removeAttr("disabled");
								} else {
									$("#sp").css("color","red").html("手机号码有误!");
									$("#btn8").attr("disabled","disabled");
								}
							} else {
								$("#sp").css("color","red").html("手机号不能为空,请输入手机号码!");
								$("#btn8").attr("disabled","disabled");
							}
						}else {
							$("#sp").css("color","red").html("手机号码已存在,请重新输入手机号码!");
							$("#btn8").attr("disabled","disabled");
						}
					})
				});
			</script>
			<%--<script>
		        function inputImg() {
		            var input = document.getElementById('files');
		            var url = window.URL.createObjectURL(input.files[0]);
		            var photo = document.getElementById('photo');
		            photo.innerHTML = "";
		            var oImg = document.createElement('img');
		            oImg.src = url;
		            photo.appendChild(oImg);

		        }
		    </script>--%>

			<%--<div id="content2" class="content2">
				<ul>
					<c:choose>
						<c:when test="${!empty orders}">
							<c:forEach var="order" items="${orders}">
								<li><a
									href="${pageContext.request.contextPath}/findProductByPid?pid=${product.pid}">
										<img src="${order.itemImage}"
										style="width: 70px; height: 70px;" />
								</a> <span style="margin: 24px;">${order.itemName}</span> <span
									style="float: right; margin-top: 20px;"> <span>${order.orderStatus}</span>
										<button class="btn btn-default" style="margin-left: 120px;"
											onclick="enterComment(${order.itemPid})">评价</button>
										<button class="btn btn-default"
											onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)">刪除</button>
								</span></li>
								<script type="text/javascript">
									function enterComment(pid){
										var url = "${pageContext.request.contextPath}/showProductToComment.do?pid="+pid;
										window.location.href = url;
									}
								</script>
							</c:forEach>
						</c:when>
						<c:otherwise>
							<div style="line-height: 550px; text-align: center;">
								<span style="font-size: 40px; color: red; font-weight: bold;">
									暂无订单</span>
							</div>
						</c:otherwise>
					</c:choose>
				</ul>
			</div>--%>

		</div>
	</div>
</body>
<script>
		$("#file").change(function () {
			$("#btn8").removeAttr("disabled");
		})
		$("input[name='password']").change(function () {
			$("#btn8").removeAttr("disabled");
		})
		$("input[name='email']").change(function () {
			$("#btn8").removeAttr("disabled");
		})
		$("input[name='telephone']").change(function () {
			$("#btn8").removeAttr("disabled");
		})
		$("input[name='address']").change(function () {
			$("#btn8").removeAttr("disabled");
		})
</script>
</html>